<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>测试页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <script src="https://unpkg.com/axios@0.21.1/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <div id="app"></div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: 100,
          id: "BV1rb411w79d",
          usertitle: "测试值",
          width: 638,
          height: 300,
          response: null,
          page: 2,
        },
        template: `<div>
          <div v-show="!hasResponse">请检查输入的BV或者AV号</div>
          <iframe
          v-show="hasResponse"
    style="margin: 0 20px"
    max-width="100%"
    scrolling="no"
    framespacing="0"
    allowfullscreen="true"
    :src="videoSrc"
  ></iframe>
  <ul v-show="hasResponse">
    <li>如果无法观看，请检查是否启用了H5播放器，或点击下方链接</li>
    <li>
      <a :href="aHref">121212</a>
    </li>
  </ul>
</div>`,
        computed: {
          hasResponse:function(){
            return this.response?true:false
          },
          idname: function () {
            return isNaN(this.id) ? "bvid" : "aid";
          },
          pageCid: function () {
            let v = null;
            if (this.response) {
              this.response.data.pages.forEach(function (item) {
                if (item.page == page) {
                  v = item;
                  return;
                }
              });
            }
            return v == null ? v : v.cid;
          },
          title: function () {
            if (this.response === null) {
              return "";
            }

            return this.usertitle !== ""
              ? this.usertitle
              : this.response.data.title;
          },
          aHref: function () {
            if (this.response !== null) {
              return `https://www.bilibili.com/video/av${this.response.data.aid}/?p=${this.page}`;
            }
            return "#";
          },
          videoSrc: function () {
            if (this.response !== null) {
              return `//player.bilibili.com/player.html?aid=${this.response.data.aid}&page=${this.page}&cid=${this.pageCid}&high_quality=1&crossDomain=1&from=wiki`
            }
            return "#"
          },
        },
        created() {
          let Vue = this;
          console.log("hello");
          axios
            .get(
              `https://api.bilibili.com/x/web-interface/view?${this.idname}=${this.id}`
            )
            .then((response) => {
              Vue.response = response;
            })
            .catch((error) => {
              console.log(error);
            });
        },
      });
    </script>
  </body>
</html>
